<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
</head>

<body>
    <div class="pd20">
        <div class="top flex_x start ">
            <a href="./payment2.html"><img src="./static/image/left.png" alt=""></a>
            <span>Confirmation </span>
        </div>
        <div class="ok">
            <img src="./static/image/ok.png" alt="">
        </div>
        <div class="title txt_center">Done</div>
        <div class="desc txt_center">
            Your ticket purchase <br>
            successfully completed
        </div>
        <div class="tic txt_center">
            <img src="./static/image/ticket.png" alt="">
        </div>
        <a href="./home.html"> <div class="submit">OK</div></a>
    </div>
</body>
<script>
    gsap.from(".top  img", {
        duration: .5,
        y: 100,
        x: 100
    });
    gsap.from(".submit", {
        duration: .5,
        y: 200,
        x: 0
    });

</script>
<style>
     .submit {
        margin-top: 60px;
        width: 339px;
        height: 45px;
        line-height: 45px;
        text-align: center;
        border-radius: 13px;
        background: #FFEAD4;
        color: #FF8906;
        font-size: 20px;
        font-style: normal;
        font-weight: 600;
    }
    body{
        background: #FAFAFA;
    }
    .tic img{
        width: 301px;
height: 301px;
    }
    .desc{
        margin-top: 5px;
        font-size: 15px;
    }
    .title {
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        margin-top: 15px;
    }

    .ok {
        width: 100%;
        text-align: center;
        margin-top: 74px;
    }

    .ok img {
        width: 119px;
        height: 119px;
        border-radius: 50%;
        margin: 0 auto;
    }

    .top img {
        width: 8px;
        height: 11px;
        margin-right: 115px;
    }

    .pd20 {
        padding: 20px;
        box-sizing: border-box;
    }

    .top {
        font-size: 15px;
        align-items: center;
    }
</style>

</html>